<template>
  <view class="page-body">
    <map id="map" ref="map" style="width: 100%; height: 528rpx" :markers="markers" :latitude="latitude" :longitude="longitude">
      <cover-view slot="callout">
        <block v-for="(item, index) in customCalloutMarkerIds" :key="index">
          <cover-view class="customCallout" :marker-id="item">
            <cover-view class="content">
              {{ markers[index].stationName }}
            </cover-view>
          </cover-view>
        </block>
      </cover-view>
    </map>
  </view>
</template>
<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/images/start.png',
          width: 24 * 1.5,
          height: 38 * 1.5,
          stationName: '江晖大厦',
          customCallout: {
            anchorY: 0,
            anchorX: 0,
            display: 'ALWAYS'
          }
        },
        {
          id: 2,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/images/start.png',
          width: 24,
          height: 38,
          stationName: '滨康路口',
          customCallout: {
            anchorY: 0,
            anchorX: 0,
            display: 'ALWAYS'
          }
        }
      ], // 地图上markers列表
      customCalloutMarkerIds: [1, 2]
    };
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.page-body {
  .customCallout {
    box-sizing: border-box;
    background-color: #fff;
    background: #ffffff;
    box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
    border-radius: 4rpx;
    display: inline-flex;
    padding: 6rpx 24rpx;
    justify-content: center;
    align-items: center;
    color: #2a7be2;
  }
}
</style>
